<template>
  <view class="login-page">
    <!-- 自定义导航栏 -->
    <custom-navbar
      :title="'注册'"
      :background-color="'#FFFFFF'"
    ></custom-navbar>

    <view class="login-content">
      <!-- Logo -->
      <view class="logo">
        <placeholder-image
          text="人体生命科学馆"
          :width="200"
          :height="200"
          :bg-color="'#5a8dee'"
        ></placeholder-image>
      </view>

      <!-- 注册表单 -->
      <view class="login-form">
        <view class="form-item">
          <uni-icons type="person" size="20" color="#999"></uni-icons>
          <input
            class="form-input"
            type="text"
            v-model="formData.account"
            placeholder="请输入账号"
          />
        </view>
        <view class="form-item">
          <uni-icons type="person" size="20" color="#999"></uni-icons>
          <input
            class="form-input"
            type="text"
            v-model="formData.userName"
            placeholder="请输入用户名"
          />
        </view>
        <view class="form-item">
          <uni-icons type="locked" size="20" color="#999"></uni-icons>
          <input
            class="form-input"
            type="password"
            v-model="formData.password"
            placeholder="请输入密码"
          />
        </view>
      </view>

      <!-- 注册按钮 -->
      <view class="login-btn" @click="handleRegister">注册</view>

      <!-- 跳转到登录页 -->
      <view class="switch-btn">
        <text>已有账号？</text>
        <text class="link" @click="goLogin">去登录</text>
      </view>

      <!-- 用户协议 -->
      <view class="agreement">
        <checkbox-group @change="handleAgreementChange">
          <label class="agreement-label">
            <checkbox :checked="isAgreed" color="#5a8dee" />
            <text class="agreement-text">
              注册即代表您已同意
              <text class="link" @click="showUserAgreement">《用户协议》</text>
              和
              <text class="link" @click="showPrivacyPolicy">《隐私政策》</text>
            </text>
          </label>
        </checkbox-group>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import CustomNavbar from "@/components/custom-navbar/index.vue";
import { request } from "@/utils/request";

// 注册请求接口
const reqRegister = (data) => {
	return request({
	  url: "/user/register",
	  method: "post",
	  data: JSON.stringify(data)
	})
}

// 表单数据
const formData = ref({
  account: "",
  userName: "",
  password: "",
});

// 是否同意协议
const isAgreed = ref(false);

// 处理注册
const handleRegister = async () => {
  if (!isAgreed.value) {
    uni.showToast({
      title: "请先同意用户协议和隐私政策",
      icon: "none",
    });
    return;
  }

  if (
    !formData.value.account ||
    !formData.value.userName ||
    !formData.value.password
  ) {
    uni.showToast({
      title: "请填写完整信息",
      icon: "none",
    });
    return;
  }

  // 模拟注册请求
  uni.showLoading({
    title: "注册中...",
  });
  
	const res = await reqRegister(formData.value)
	
	if (res.code !== 200) {
	  // 注册失败
	  uni.showToast({
	    title: "注册失败",
	    icon: "error",
	  });
	  
	  uni.hideLoading();
	  
	  return
	}
	  
	// 模拟注册成功
	uni.showToast({
		title: "注册成功",
		icon: "success",
	});
	
	uni.hideLoading();
	  
	// 跳转到登录页
	uni.redirectTo({ url: "/pages/login/index" });
};

// 处理协议勾选
const handleAgreementChange = (e) => {
  isAgreed.value = e.detail.value.length > 0;
};

// 显示用户协议
const showUserAgreement = () => {
  uni.navigateTo({
    url: "/pages/agreement/user",
  });
};

// 显示隐私政策
const showPrivacyPolicy = () => {
  uni.navigateTo({
    url: "/pages/agreement/privacy",
  });
};

// 跳转到登录页
const goLogin = () => {
  uni.redirectTo({ url: "/pages/login/index" });
};
</script>

<style lang="scss" scoped>
.login-page {
  min-height: 100vh;
  background-color: $uni-bg-color-grey;
}

.login-content {
  padding: $spacer-6 $spacer-4;
}

.logo {
  display: flex;
  justify-content: center;
  margin-bottom: $spacer-8;
}

.login-form {
  background-color: $uni-bg-color;
  border-radius: $uni-border-radius-lg;
  padding: $spacer-4;
  margin-bottom: $spacer-6;
  box-shadow: $box-shadow-card;
}

.form-item {
  display: flex;
  align-items: center;
  padding: $spacer-3 0;
  border-bottom: 1px solid $uni-border-color;

  &:last-child {
    border-bottom: none;
  }
}

.form-input {
  flex: 1;
  margin-left: $spacer-3;
  font-size: $uni-font-size-base;
}

.login-btn {
  background: $gradient-primary;
  color: $uni-text-color-inverse;
  font-size: $uni-font-size-lg;
  height: 88rpx;
  border-radius: $uni-border-radius-lg;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: $spacer-6;
}

.switch-btn {
  text-align: center;
  margin-bottom: $spacer-6;
  font-size: $uni-font-size-base;
  color: $uni-text-color-grey;
}

.switch-btn .link {
  color: $uni-color-primary;
  margin-left: 8rpx;
  cursor: pointer;
}

.agreement {
  text-align: center;
}

.agreement-label {
  display: flex;
  align-items: center;
  justify-content: center;
}

.agreement-text {
  font-size: $uni-font-size-sm;
  color: $uni-text-color-grey;
  margin-left: $spacer-2;
}

.link {
  color: $uni-color-primary;
}
</style>
